.table {
	.filter-container {
		display: flex;
		padding: 1.5rem 0 1rem 0;

		.select-container {
			flex: 1 0 0;
			display: flex;
			justify-content: flex-end;

			.select {
				width: 12.5rem;
			}

			.item {
				margin-right: 1rem;
			}
		}

		.input {
			width: 15rem;
		}

		.search-icon {
			color: var(--color-4);
		}
	}

	.table-container {
		height: 24.25rem;
		overflow: auto;

		.table-content {
			position: relative;
			width: 100%;
			border-spacing: 0;
			border: 1px solid var(--color-border-2);
			border-top: none;

			th {
				position: sticky;
				top: 0;
				text-align: left;
				background-color: var(--color-bg-2);
				font-weight: normal;
			}

			td,
			th {
				height: 2.25rem;
				padding-left: 1.5rem;
				border-top: 1px solid var(--color-border-2);
			}

			.head {
				.date {
					width: 12rem;
				}

				.affect {
					width: 12.75rem;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.status {
					width: 5.5rem;
				}
			}

			.red {
				color: var(--color-error);
			}
		}

		.empty {
			height: 20rem;
		}
	}
}
